<template>
     <div style="width: 100%;">
       <div style="display: flex;justify-content: space-between;margin-bottom: 5px">
         <div>
           <el-input v-model="search_text"
                     :disabled="showAdvanceSearchVisible"
                     @keydown.enter.native="initAccounts"
                     size="small"
                     style="width: 300px;margin-right: 10px"
                     prefix-icon="el-icon-search"
                     clearable
                     @clear="initAccounts"
                     placeholder="请输入姓名或用户名或手机号进行搜索。。。"></el-input>
           <el-button icon="el-icon-search" :disabled="showAdvanceSearchVisible" type="primary" size="small" @click="initAccounts">搜索</el-button>
         </div>
         <div>
           <el-button type="success" size="mini" icon="el-icon-refresh" @click="initAccounts"></el-button>
         </div>
       </div>
       <div>
         <el-table
             :data="accounts"
             stripe
             border
             size="small"
             style="width: 100%"
             @selection-change="handleSelectionChange">
           <el-table-column
               type="selection"
               width="55">
           </el-table-column>
           <el-table-column
               prop="seq_no"
               label="序号"
               align="center"
               width="55">
           </el-table-column>
           <el-table-column prop="userFace" label="头像" width="70">
             <template v-slot="scope">
<!--               <img :src="scope.row.userFace" alt="" width="40" height="40">-->
               <el-popover placement="top-start" trigger="hover">
                 <div class="row_reserve">
                   <img class="big-img" :src="scope.row.userFace"/>
                 </div>
                 <div slot="reference">
                   <img class="td-img" width="40" height="40" :src="scope.row.userFace" />
                 </div>
               </el-popover>
             </template>
           </el-table-column>
           <el-table-column
               prop="name"
               label="姓名"
               width="150">
           </el-table-column>
           <el-table-column
               prop="username"
               label="用户名"
               width="150">
           </el-table-column>
           <el-table-column
               prop="phone"
               label="手机号码"
               width="150">
           </el-table-column>
           <el-table-column
               prop="telephone"
               label="住宅电话"
               width="150">
           </el-table-column>
           <el-table-column
               prop="address"
               label="联系地址"
               width="350">
           </el-table-column>
           <el-table-column
               prop="createdate"
               label="创建时间"
               width="150">
           </el-table-column>
           <el-table-column
               prop="enabled"
               label="是否启用"
               width="100">
             <template slot-scope="scope">
               <el-tag type="success" v-if="scope.row.enabled">已启用</el-tag>
               <el-tag type="danger" v-else>未启用</el-tag>
             </template>
           </el-table-column>
           <el-table-column
               width="180"
               label="操作">
             <template slot-scope="scope">
               <el-tooltip placement="top">
                 <div slot="content">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;初始化密码是：123<br>获取密码后请及时修改密码</div>
                 <el-button size="small" type="primary" @click="initPassWord(scope.row)">初始化密码</el-button>
               </el-tooltip>
               <el-button size="small" type="danger" @click="deleteHandler(scope.row)">删除</el-button>
             </template>
           </el-table-column>
         </el-table>
         <div style="display: flex;justify-content: space-between;width: 100%;margin-top: 5px" >
           <div>
             <el-button size="small" type="danger"
                        :disabled="this.multipleSelection.length===0"
                        @click="deleteMany"
             >批量删除</el-button>
           </div>
           <div>
             <el-pagination
                 background
                 @current-change="currentChange"
                 @size-change="sizeChange"
                 layout="sizes,prev, pager, next, jumper, ->, total"
                 :total="total">
             </el-pagination>
           </div>
         </div>
       </div>
   </div>
</template>

<script>
export default {
  name: "AccountQuery",
  data(){
    return {
      search_text:"",
      accounts:[],
      account:{
        id:'',
        password:'123'
      },
      id:'',
      showAdvanceSearchVisible:false,
      dialogVisible:false,
      multipleSelection:[],
      total:0,
      size:10,
      currentPage:1,
    }
  },
  methods:{
    //初始化密码
    initPassWord(data){
      this.account.id=data.id;
      this.$postRequest("/system/admin/initPassword",this.account).then(resp=>{
        if(resp){
          this.id='';
          this.$message.success(resp.message);
        }
      });
    },
    //账号批量删除
    deleteMany(){
      this.$confirm('此操作将永久删除['+this.multipleSelection.length+']个账号, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = "?";
        this.multipleSelection.forEach(item=>{
          ids+= "ids=" + item.id + "&";
        });
        ids = ids.substring(0,ids.length-1);
        this.$deleteRequest("/system/admin/account"+ids).then(resp=>{
          if(resp){
            this.initAccounts();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //每页条数事件
    sizeChange(size){
      this.size = size;
      this.initAccounts();
    },
    //当前页事件
    currentChange(currentPage){
      this.currentPage = currentPage;
      this.initAccounts();
    },
    //多选
    handleSelectionChange(val){
      this.multipleSelection = val;
    },
    //删除
    deleteHandler(data){
      this.$confirm('此操作将永久删除['+data.name+']该账号, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$deleteRequest("/system/admin/account/"+data.id).then(resp=>{
          if(resp){
            this.initAccounts();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //初始化宗门
    initAccounts(){
      this.$getRequest("/system/admin/account?search_text="+this.search_text+"&currentPage="+this.currentPage+"&size="+this.size).then(resp=>{
        if(resp){
          //alert(JSON.stringify(resp))
          this.accounts = resp.data;
          this.total = resp.total;
        }
      })
    },
  },
  mounted() {
    this.initAccounts();
  }

}
</script>

<style scoped>

</style>